<template>
  <section>
    <template v-if="isWechat">
      <section style="background:#888785" :style="{height: currentHeight + 'px'}" @click="isWechat = false">
        <img style="width:100%;" src="@/assets/imgs/guide.jpg" alt="">
      </section>
    </template>

    <template v-else>
      <section class='f-share' :style="{height: currentHeight + 'px'}">
        <img style="width:100%;" src="@/assets/imgs/share_h5_pic1.png" alt="">

        <div class="f-center f-mt-05">
          <van-button color="#7855E5" plain @click="toRegister">
            <p style="padding:15px 0px;width:250px">先注册后下载，立即注册秒返宝</p>
          </van-button>
        </div>

        <div class="f-center f-mt-20">
          <van-button style="margin-top:50px" color="#7855E5" plain @click="download" :loading="loading ">
            <p style="padding:15px 0px;width:250px">下载秒返宝App</p>
          </van-button>
        </div>
      </section>
    </template>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { successDeal, getUrlParam, getUrlKey, warningDeal, locationDownLoad } from '@/utils/utils';
import axios from "axios";
import { showLoadingToast, closeToast } from 'vant';


export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      loading: false,
      isWechat: false,
      currentHeight: "",
      OS_TYPE: null,

      shopCode: "",
    })

    onMounted(() => {
      state.currentHeight = window.innerHeight

      state.shopCode = getUrlKey('code')
    })

    const download = () => {
      state.isWechat = isWeichatFn()
      if (!state.isWechat) {
        getUserAgent().then(type => {
          if (type == 1) {
            showLoadingToast({
              forbidClick: true,
              duration: 0,
            });
            axios({
              url: `${location.origin}/mnc/w/package/last`,
              data: {
                'packageName': 'com.borya.miaofan'
              },
              method: 'post'
            }).then(res => {
              if (res.data.code == 200) {
                locationDownLoad(res.data.data.filepath)
              } else {
                warningDeal(res.data.msg)
              }
              setTimeout(() => {
                closeToast()
              }, 1000)
            }).catch(err => {
              closeToast()
            })
          }
        })
      }
    }

    // 判断是否在微信内
    function isWeichatFn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    }

    // 判断终端类型
    const getUserAgent = () => {
      return new Promise((resolve, reject) => {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('ANDROID') > -1; // android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
        /**
         * 1 安卓
         * 2 IOS
         * 3 PC
         */
        if (isAndroid) {
          resolve(1)
        } else if (isiOS) {
          resolve(2)
        } else {
          resolve(3)
        }
      })
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const toRegister = () => {
      router.push({
        path: '/share/register',
        query: {
          shopCode: state.shopCode
        }
      })
    }

    return {
      ...toRefs(state),
      handleCopy,
      download,
      toRegister
    }
  }
}
</script>
<style lang='scss' scoped>
.f-share {
  background: #7855e5;
}
</style>